<template>
    <div class="container">
        <h1 class="title">{{photoinfo.title}}</h1>
        <div class="subtitle">
            <span>发表时间：{{ photoinfo.add_time|dataFormat}}</span>
            <span>点击：{{ photoinfo.click}}次</span>
        </div>
        <hr>

        <!-- 略缩图 -->
        <!-- <div class="thum">
            <vue-preview :slides="thumimg" @close="handleClose"></vue-preview>
        </div> -->
        <div class="thum">
            <img class="preview-img" v-for="(item,i) in thumimg" :key="item.src"
            height="100" @click="$preview.open(i,thumimg)" :src="item.src">
        </div>

        <!-- 内容区 -->
        <div class="content" v-html="photoinfo.content"></div>
        <!-- 现成评论组件  并且要把父组件中的id传到子组件中去-->
        <my-com :id="id"></my-com>
    </div>
</template>
<script>
import comment from '../../new/comment/subcomment.vue'

export default {
    data(){
        return {
            id:this.$route.params.id,
            photoinfo:{},
            thumimg:[]
        }
    },
    created(){
        this.getphotoinfo(),
        this.getthumimg()
    },
    methods:{
        //获取图片展示内容
        getphotoinfo(){
            this.$http.get('http://www.liulongbin.top:3005/api/getimageInfo/'+this.id)
            .then(result=>{
                    console.log(result.body)
                if(result.body.status===0){
                    this.photoinfo=result.body.message[0]
                }else{
                    console.log('err')
                }
            })
        },
        //获取略缩图图片
        getthumimg(){
             this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/'+this.id)
            .then(result=>{
                    // console.log(result.body)
                if(result.body.status===0){
                    result.body.message.forEach(item => {
                        item.w=600;//设置大图浏览时的宽度
                        item.h=400;
                        // item.msrc=item.src;//小图的
                    })
                     this.thumimg=result.body.message
                }
          })
        },
        //关闭图片
        handleClose () {
          console.log('close event')
         }

    },
    components:{
        'my-com':comment
    }
}
</script>
<style lang="scss" scoped>
.container{
    padding: 3PX;
    .title{
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
        color: #26A2FF;
    }
    .subtitle{
        font-size: 13px;
        display: flex;
        justify-content: space-between;
    }
    .content{
        font-size: 13px;
        line-height: 30px;
    }
    // .thum{
    //     /deep/ .my-gallery{
    //         display: flex;
    //         flex-wrap: wrap;//默认换行
    //         figure{
    //             width: 30%;
    //             margin: 5px;
    //             img{
    //                 width: 100%;
    //                 box-shadow: 0 0 9px #999;
    //                 border-radius: 5px;
    //             }
    //         }
    //     }
    // }
    .thum{
        img{
            margin: 5px;
            box-shadow: 0 0 8px #999;
        }
    }
}
</style>